<template>
    <div class="el-bottom-button-dialog">
      <el-dialog :visible="visible" @close="hide" v-bind="$attrs">
        <div slot="title" v-if="$slots.title != null">
          <slot name="title" />
        </div>
        <slot />
        <div slot="footer" class="dialog-footer" align="right">
          <el-button @click="hide">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
export default {
  inheritAttrs: false,
  props: {
    visible: {
      type: Boolean,
      required: true
    }
  },
  model: {
    prop: 'visible',
    event: 'change'
  },
  methods: {
    hide () {
      this.$emit('change', false)
    },
    confirm () {
      this.$emit('on-confirm')
    }
  }
}
</script>

<style scoped lang="less">

</style>
